<% include ../layout/header.html %>

<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="#">首页</a>
            </li>
            <li class="active">控制台</li>
        </ul><!-- .breadcrumb -->
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    <form class="form-search" style="height: 80px;" id="menuForm">
                        <div class="col-xs-12">
                            <div class="col-xs-3">
                                输入名称：<input type="text" placeholder="" name="menuName" value=""/>
                            </div>
                            <div class="col-xs-3">
                                开始日期：
                                <input class="date-picker" type="text" data-date-format="yyyy-mm-dd" placeholder="" name="startDate"/>
                            </div>
                            <div class="col-xs-3">
                                六个名称：<input type="text" placeholder="" name="menuName1"/>
                            </div>
                        </div>
                        <div class="col-xs-12" style="margin-top: 15px;">
                            <div class="col-xs-3">
                                一级菜单：
                                <select name="menuPid">
                                    <option value="">请选择</option>
                                    <option value="3">选项一</option>
                                    <option value="8">选项二</option>
                                    <option value="1">选项三</option>
                                </select>
                            </div>
                            <div class="col-xs-3">
                                单项选择：
                                <label>
                                    <input name="hasSubMenu" type="radio" class="ace" value="0"/>
                                    <span class="lbl">选项一</span>
                                </label>
                                <label>
                                    <input name="hasSubMenu" type="radio" class="ace" value="1"/>
                                    <span class="lbl">选项二</span>
                                </label>
                            </div>
                            <div class="col-xs-3">
                                多项选择：
                                <label>
                                    <input name="menuType" type="checkbox" class="ace" value="1"/>
                                    <span class="lbl">选项一</span>
                                </label>
                                <label>
                                    <input name="menuType" type="checkbox" class="ace" value="2"/>
                                    <span class="lbl">选项二</span>
                                </label>
                            </div>
                            <div class="col-xs-3">
                                <button type="button" class="btn btn-purple btn-sm" onclick="doQuery()">
                                    <i class="icon-search icon-on-right bigger-110"></i>
                                    查询
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="col-xs-12">
                        <button class="btn btn-sm btn-info" style="margin: 15px 0 5px 0;" onclick="add()">添加</button>
                    </div>
                    <div class="col-xs-12">
                        <div class="table-responsive">
                            <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>菜单名称</th>
                                    <th>菜单连接</th>
                                    <th>父级菜单</th>
                                    <th>菜单Class</th>
                                    <th>菜单Icon</th>
                                    <th>
                                        <i class="icon-time bigger-110 hidden-480"></i>
                                        创建时间
                                    </th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <%
                                for(var i = 0;i　< result.data.length;i++){
                                    var menu = result.data[i];
                                %>
                                <tr>
                                    <!--<td class="center">
                                        <label>
                                            <input type="checkbox" class="ace" />
                                            <span class="lbl"></span>
                                        </label>
                                    </td>-->
                                    <td>
                                        <%= menu.menu_name %>
                                    </td>
                                    <td><%= menu.menu_url %></td>
                                    <td><%= menu.menu_pid %></td>
                                    <td><%= menu.menu_class %></td>
                                    <td><%= menu.menu_icon %></td>
                                    <td><%=: menu.create_time | dateFormat %></td>
                                    <td>
                                        <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                                            <!-- 编辑按钮 -->
                                            <button class="btn btn-xs btn-info" onclick="edit('<%=menu.id%>')">
                                                <i class="icon-edit bigger-120"></i>
                                            </button>
                                            <!-- 删除按钮按钮 -->
                                            <button class="btn btn-xs btn-danger" onclick="del('<%=menu.id%>')">
                                                <i class="icon-trash bigger-120"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <%
                                }
                                %>
                                </tbody>
                            </table>
                        <% include ../layout/page.html %>
                        </div><!-- /.table-responsive -->
                    </div><!-- /span -->
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div>

<% include ../layout/bottom.html %>
<!--[if lte IE 8]>
<script src="/assets/js/excanvas.min.js"></script>
<![endif]-->

<!-- 日期js -->
<script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script>
<script src="/assets/js/date-time/moment.min.js"></script>
<script src="/assets/js/date-time/daterangepicker.min.js"></script>



<script src="/assets/js/bootbox.min.js"></script>

<!-- zDialog -->
<script type="text/javascript" src="/assets/js/zDialog/zDrag.js"></script>
<script type="text/javascript" src="/assets/js/zDialog/zDialog.js"></script>

<!-- validator -->
<script src="/javascripts/validator.js"></script>

<script src="/javascripts/showQueryData.js"></script>
<script type="text/javascript">
    function add(){
        var diag = new Dialog();
        diag.Width = 770;
        diag.Height = 368;
        diag.Title = "添加菜单";
        diag.URL = "/menu/add";
        diag.OKEvent = function(){
            var innerDoc = diag.innerFrame.contentWindow.document;
            var form = innerDoc.getElementById("menuForm");
            var formData = $(form).serializeObject()
            $.ajax({
                url: '/menu/save',
                type: 'post',
                data: {menu:formData},
                dataType: 'json',
                beforeSend:function(){

                },
                success: function(data){
                    if(data.result == 1){
                        diag.close();
                        bootbox.confirm("操作成功", function(result) {
                            if(result){
                                window.location.reload();
                            }
                        });
                    }else{
                        bootbox.confirm("操作失败", function(result) { });
                    }
                },
                error:function(){

                },
                complete:function(){

                },
                timeout:3000,
                async: false,
                cache: false
            });

        };
        diag.show();
    }
    function edit(id){
        var diag = new Dialog();
        diag.Width = 770;
        diag.Height = 368;
        diag.Title = "添加菜单";
        diag.URL = "/menu/edit?id="+id;
        diag.OKEvent = function(){
            var innerDoc = diag.innerFrame.contentWindow.document;
            var form = innerDoc.getElementById("menuForm");
            var formData = $(form).serializeObject();
            $.ajax({
                url: '/menu/update',
                type: 'post',
                data: {menu:formData},
                dataType: 'json',
                beforeSend:function(){},
                success: function(data){
                    if(data.result == 1){
                        diag.close();
                        bootbox.confirm("操作成功", function(result) {
                            if(result){
                                window.location.reload();
                            }
                        });
                    }else{
                        bootbox.confirm("操作失败", function(result) { });
                    }
                },
                error:function(){},
                complete:function(){},
                timeout:3000,
                async: false,
                cache: false
            });

        };
        diag.show();
    }
    function del(id){
        if(!id || id == 0){
            bootbox.confirm("请选择要删除的数据", function(result) {});
            return;
        }
        $.ajax({
            url: '/menu/delete',
            type: 'post',
            data: {id:id},
            dataType: 'json',
            beforeSend:function(){},
            success: function(data){
                if(data.result == 1){
                    bootbox.confirm("操作成功", function(result) {
                        if(result){
                            window.location.reload();
                        }
                    });
                }else{
                    bootbox.confirm("操作失败", function(result) { });
                }
            },
            error:function(){},
            complete:function(){},
            timeout:3000,
            async: false,
            cache: false
        });
    }
    function doQuery(){
        var formData = $('#menuForm').serialize();
        var url = window.location.href.split('?')[0];
        window.location.href = url + '?' + formData;
    }
    jQuery(function ($) {
        var url = window.location.href;
        form.showData(url,'menuForm');
        // 日期控件引用
        $('.date-picker').datepicker({
            autoclose:true
        }) .next().on(ace.click_event, function(){
            $(this).prev().focus();
        });
        $("#doQuery").on(ace.click_event, function() {

        });

    });
</script>
</body>
</html>